<template>
  <div>
    <h3>编辑题目</h3>
    <div class="bt">
      <h4 class="h4">图片单选</h4>
    </div>
    <h4 class="h4">标题</h4>
    <el-input type="text" v-model="data.title"></el-input>
    <!-- <el-input type="text" v-model="data.tips"></el-input> -->
    <h4 class="h4">选择图片</h4>
    <!--<h1>{{ data.option[0].imageUrl }}</h1>-->
    <!-- http://47.106.246.177:8080 action="string"  设置后端上传照片的接口-->
    <el-upload
      class="upload-demo"
      drag
      :on-success="success"
      action="http://zlay1.cn1.utools.club/form/upload"    
      multiple
    >
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      <div class="el-upload__tip" slot="tip">
        只能上传jpg/png文件，且不超过500kb
      </div>
    </el-upload>
    <!-- 修改文字颜色 -->

    <h4 class="h4" >提示</h4>
    <br />
    <el-color-picker v-model="data.tips_color.color"></el-color-picker>
    <el-input
      type="textarea"
      :rows="6"
      placeholder="请输入内容"
      v-model="data.tips"
    ></el-input>
    <h5 style="float: right">可输入文字:{{ data.tips.length }}/10000</h5>

    <el-button class="bc">保存问卷</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 图片拼接的路径
      // imgsUrl:""
    }
  },
  props: ["data"],
  methods: {
    success: function (response, file, flieList) {
      // console.log(this.data);
      if(this.data.option.length<5){
      this.$emit("addpush", response.data);      
      }else{
        alert('最多只能添加五张图片')
      }
      // this.data.option[index1].imageUrl=response.data
      // console.log(response.data)
    },
  },
  created() {
    // this.imgsUrl=this.$root.imgsurl
    // console.log(this.imgsUrl)
  },
};
</script>
<style>
* {
  padding: 0;
  margin: 0;
  list-style: none;
  text-decoration: none;
}
.h4 {
  color: black;
  float: left;
}
.el-upload-dragger {
  width: 250px;
  border: 1px solid red;
}
.bt {
  border: 1px solid black;
  border-left: none;
  border-right: none;
  height: 30px;
  text-align: center;
  line-height: 30px;
}
.bc {
  width: 150px;
  height: 30px;
  margin-top: 50px;
  margin: 0 auto;
  background-color: #2875e8;
  color: white;
  text-align: center;
  line-height: 5px;
}
.bc:hover {
  background-color: lightskyblue;
}
</style>